Alinhamento responsivo

Layout responsivo é a capacidade de formatar os elementos da página de acordo com a capacidade do browser em exibí-los.

Importante :
1 - O bootstrap utiliza a metodologia Mobile-First, ou seja, sempre dá prioridade a formatação em dispositivos móveis.
Por esse motivo ao simplesmente aplicar o bootstrap numa página ele fica com um formato muito diferente, pronto para o celular praticamente.

2 - A css tem papel fundamental neste design. Todos os media queries estão na css.

3-Neste exemplo alteramos apenas a tag h1 (Layout Responsivo) e a cor de fundo do body.

Antes de entrarmos nos detalhes das media-queries convém explicar seu nível superior - os media-types.

Media Types: São os tipos de media que utilizamos para exibir o documento html.
   Eles determinam o formato geral do documento, os limites da media mas não em detalhes do documento.

O media-types podem ser :
   all – todos os dispositivos
   aural – sintetizadores de voz
   braille – leitores de Braille
   embossed – impressoras de Braille
   handheld – dispositivos de móveis ou de mão. Por exemplo: celulares com telas pequenas.
   print – impressoras convencionais
   projection - apresentações de slides
   screen- telas coloridas
   tty - teleimpressoras e terminais
   tv- televisores

   Exemplo de uso :
   <link rel="stylesheet" media="print" href="print.css">

Portanto, o bootstrap antes de formatar os media-queries formata os media-types para que, por exemplo, o documento possa ser impresso ou visto corretamente.


O media-type default do bootstrap é o screen que adota a seguinte resolução de telas:
   320 pixels - Smartphones no modo retrato
   480 pixels - Smartphones no modo paisagem
   600 pixels - Tablets pequenos. Ex.: Amazon Kindle (600px x 800px)
   768 pixels - Tablets maiores no modo retrato. Ex.: IPad (768px x 1024px)
   1024 pixels - Tablets maiores no moto paisagem e monitores mais antigos.
   1200 pixels - Monitores tipo wide.

Note que o media-querie é ativado quando entramos no modo a que ele define a formatação.
Portanto ao exibir um documento ele primeiramente aplica o formato para aquele padrão na montagem da página.
Ao redimensionarmos a tela, por exemplo, ao aumentarmos a tela de 100 a 319 pixels nada acontece mas ao atingir a largura de 320 px um novo estilo é aplicado.
Portanto, o correto seria afirmar que existe um range para aplicação do media-querie.
Se existe uma definição para aquele formato, ele aplica, senão permanece o anteriormente aplicado.
Portanto, definimos um range de atuação para o media querie.

Veja um exemplo:
@media (min-width: 992px) and (max-width: 1199.98px) {
   h1 {
      font-size: 5em;
   }
}
Portanto, qando a tela tiver de 992px até 1200px a fonte será aumentada para 5em.
Para que o efeito ficasse mais claro, resolvi aplicar cor difentes no background para cada formato.